<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://eureka.yigolden.net/stringutils/sutaglib/1.0" prefix="su"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>填写问卷</title>

  <!-- Bootstrap -->
    <link href="<%=request.getContextPath()%>/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/jumbotron.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath()%>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath()%>/static/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
 <jsp:include page="../Common/navHeader.jsp"></jsp:include>

<div class="container">
       
      <br/>
      <br/>   
      
	  <div class="row">
      <div class="col-sm-1"></div><!--左侧不用-->
      
      <div class="col-sm-10 col-xs-12">
	  
	  <c:set var="i" value="0" />
      <c:if test="${questionnaire ne null }">         
  
  	  <h3 class="text-center">${questionnaire.subject}</h3><br/>
  	  <div class="row">
  	  	<div class="col-xs-6 text-left">
  	  		开始时间：${fn:escapeXml(questionnaire.startTimeFormatted)}
  	  	</div>
  	  	<div class="col-xs-6 text-right">
  	  		结束时间：${fn:escapeXml(questionnaire.endTimeFormatted)}
  	  	</div>
  	  </div>
	  <form action="<%=request.getContextPath()%>/Questionnaire/FillInQuestionnaire?questionnaireid=${param.questionnaireid}" method="POST">
	  	  <c:forEach var="item" items="${questionnaire.questions}">
	  	  <c:set var="i" value="${i + 1 }" />
					
		  	  <div class="panel panel-success">
			    <div class="panel-heading">第${i}题：</div>
			    <div class="panel-body">
			        <p>${fn:escapeXml(item.name) }</p>
			    </div>
			    
		    	<c:if test="${item.type eq '选择题' }">
			    	<ul class="list-group">
						<c:forEach var="subitem" items="${item.options}">
						
							<li class="list-group-item">
								<label for="${fn:escapeXml(subitem.id)}" style="width:100%">
								<input type="radio" id="${fn:escapeXml(subitem.id)}" value="${fn:escapeXml(subitem.optionid)}" name="${item.questionid }-option"/>
								&nbsp;&nbsp;${fn:escapeXml(subitem.optionid)}：&nbsp;&nbsp;${fn:escapeXml(subitem.name)}
								</label>
							</li>
							 
						</c:forEach>
					</ul>
				</c:if>
				
				<c:if test="${item.type eq '简答题' }">
					<textarea class="form-control" name="${item.questionid}-short-answer" rows="3"></textarea>
				</c:if>
			    
			    <div class="panel-footer">题目类型：${item.type}</div>
			  </div>
		  </c:forEach>
		  <div class="row">
		  	  	<div class="col-xs-6 text-right">
		  	  		<button type="submit" class="btn btn-success">提交</button>
		  	  	</div>
		  	  	<div class="col-xs-6 text-left">
		  	  		<button type="reset" class="btn btn-warning">放弃</button>
		  	  	</div>
	  	  </div>
  		</form>
  		<br/>
  		<c:if test="${errorCode eq 0 }">
	        <div class="alert alert-warning" role="alert">
	           	提交成功！谢谢您的合作！
	        </div>
    	</c:if>
    	<c:if test="${errorCode eq 1 }">
	        <div class="alert alert-warning" role="alert">
	           	提交失败！您已经填写过此份问卷，不能重复提交！谢谢您的配合。
	        </div>
    	</c:if>
    	<c:if test="${errorCode eq 2 }">
	        <div class="alert alert-warning" role="alert">
	           	提交失败！您未完全填写此份问卷，请将所有题目填写完毕，然后点击提交按钮。
	        </div>
    	</c:if>
  	  </c:if>
      
      <c:if test="${questionnaire eq null }">  
        <div class="alert alert-warning" role="alert">
           	问卷加载失败！可能是问卷结构不完整或者没有提供合法参数所致。 
        </div>
      </c:if>
      </div>
      <div class="col-sm-1"></div><!--右侧不用-->
    </div>


	<jsp:include page="../Common/Footer.jsp"></jsp:include>

</div>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<%=request.getContextPath()%>/static/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<%=request.getContextPath()%>/static/js/bootstrap.min.js"></script>
    
    <script type="text/javascript">
    window.addMessageBusy = false;
    
    $(document).ready(function() {
    	$("a.addMessageLink").click(function() {
			if (window.addMessageBusy) return false;
			window.addMessageBusy = true;

			$("a.addMessageLink").addClass("disabled");
			
    		var destination = $(this).data("destination");
    		
    		var postData = {destination : destination};
    		$.ajax({
    			method: "POST",
    			url: "<%= request.getContextPath()%>/Message/AddMessage",
    			contentType : "application/json",
    			data: JSON.stringify(postData),
    			dataType : "json",
    			success: function(data) {
    				if (data.status == 0) {
    					alert("申请成功！");
    				} else {
    					alert(data.message);
    				}
    			},
    			error: function() {
    				alert("服务器连接失败！");
    			},
    			complete: function() {
    				$("a.addMessageLink").removeClass("disabled");
    				window.addMessageBusy = false;
    			}
    		});
    		
    		
    		return false;
    	});
    });
    
    </script>
</body>
</html>